<template>
  <div id="loginForm">
    <a-form :model="form" :style="{ width: '50%' }" @submit="handleSubmit">
      <a-form-item field="userName" label="Username">
        <a-input
          v-model="form.userName"
          placeholder="please enter your username"
        />
      </a-form-item>

      <a-form-item field="passWord" label="Password">
        <a-input-password
          v-model="form.password"
          placeholder="Please enter your password"
          allow-clear
        />
        <!-- <a-input v-model="form.post" placeholder="please enter your post..." /> -->
      </a-form-item>

      <!-- <a-form-item field="isRead">
      <a-checkbox v-model="form.isRead"> I have read the manual </a-checkbox>
    </a-form-item> -->

      <a-form-item style="margin-top: 50px">
        <a-button html-type="submit">Login</a-button>
        <a-button style="margin-left: 180px">
          <router-link to="/register"> register </router-link>
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
  
  <script>
import { reactive } from "vue";
import axios from "axios";

import { useStore } from "vuex";
const store = useStore();

export default {
  setup() {
    const form = reactive({
      userName: "",
      password: "",
      //   isRead: false,
    });

    return {
      form,
    };
  },
  methods: {
    handleSubmit() {
      if (this.form.userName == "" || this.form.password == "") {
        alert("用户名或密码不能为空");
      } else {
        axios
          .post("/user/login", {
            userName: this.form.userName,
            userPwd: this.form.password,
          })
          .then((response) => {
            if (response.data.userIdentity == "admin") {
              this.$router.replace("/admin");
            }
            if (response.data.userIdentity == "parent") {
              this.$router.replace("/parent");
            }
            if (response.data.userIdentity == "teacher") {
              this.$router.replace("/teacher");
            }
            if (response.data.userIdentity == "user") {
              this.$router.replace("/user");
            }
            this.$store.commit("user/updateUser", {
              userId: response.data.userId,
              userName: response.data.userName,
              userIdentity: response.data.userIdentity,
              classId: response.data.classId,
            });
            // console.log(this.$store.state.user.loginUser.userName);
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
  },
};
</script>
<style>
</style>
  